<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>账号注册</title>
    <link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/global.css"> -->
    <style type="text/css">
    .weui-btn_primary {
        background-color: #379fd5;
    }

    .weui-btn_primary:not(.weui-btn_disabled):active {
        background-color: #379fd5;
    }

    .weui-vcode-btn {
        color: #379fd5;
    }

    .weui-vcode-btn:active {
        color: #379fd5;
    }

    .weui-dialog__btn_primary {
        color: #379fd5;
    }

    .vux-header {
        padding: 3px 0;
        background-color: #35495e;
        text-align: center;
    }

    .vux-header-title {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 400;
        color: #fff;
    }

    body {
        background-color: #f8f8f8;
    }
    </style>
</head>

<body>
    <div class="vux-header">
        <h1 class="vux-header-title">账号注册</h1>
    </div>
    <div class="weui-cells weui-cells_form" id="form">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">身份证号</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" required pattern="REG_IDNUM" maxlength="18" placeholder="" emptyTips="请输入身份证号码" notMatchTips="请输入正确的身份证号码">
            </div>
            <div class="weui-cell__ft"> <i class="weui-icon-warn"></i> </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">姓名</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" required pattern="" placeholder="" emptyTips="请填写姓名">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">密码</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="password" name="password" required pattern="" placeholder="" emptyTips="请输入密码">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">重复密码</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="password" name="repassword" required pattern="" placeholder="" emptyTips="请输入重复密码" notMatchTips="两次输入密码不一致">
            </div>
        </div>
        <div class="weui-cell" id="tel">
            <div class="weui-cell__hd">
                <label class="weui-label">手机号码</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$" maxlength="11" placeholder="" emptyTips="请输入手机号" notMatchTips="请输入正确的手机号">
            </div>
        </div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd">
                <label class="weui-label">验证码</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" maxlength="6" required placeholder="" emptyTips="请输入验证码">
            </div>
            <div class="weui-cell__ft">
                <button class="weui-vcode-btn">获取短信验证码</button>
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="formSubmitBtn">注册</a>
    </div>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
    <script type="text/javascript">
    /* form */
    // 约定正则
    var regexp = {
        regexp: {
            IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
            VCODE: /^.{4}$/
        }
    };

    // 失去焦点时检测
    weui.form.checkIfBlur('#form', regexp);

    // 表单提交
    document.querySelector('#formSubmitBtn').addEventListener('click', function() {
        weui.form.validate('#form', function(error) {
            console.log(error);
            if (!error) {
                var password = document.querySelector('input[name=password]').value,
                    repassword = document.querySelector('input[name=repassword]').value
                if (password != repassword) {
                    weui.form.showErrorTips({
                        ele: document.querySelector('input[name=repassword]'),
                        msg: 'notMatch'
                    })
                    return
                }
                var loading = weui.loading('提交中...');
                setTimeout(function() {
                    loading.hide();
                    weui.toast('提交成功', 3000);
                }, 1500);
            }
        }, regexp);
    });

    var flag
    document.querySelector('.weui-vcode-btn').addEventListener('click', function() {
        if (flag) return
        weui.form.validate('#tel', function(error) {
            console.log(error)
            if (!error) {
                flag = !flag
                var btn = document.querySelector('.weui-vcode-btn')
                btn.style.color = '#999'
                var count = 10
                btn.innerHTML = '重新获取短信验证码(' + count + ')'
                var inter = setInterval(function() {
                    count--
                    if (count > 0) {
                        btn.innerHTML = '重新获取短信验证码(' + count + ')'
                    } else {
                        clearInterval(inter)
                        btn.innerHTML = '重新获取短信验证码'
                        btn.style.color = '#379fd5'
                        flag = !flag
                    }
                }, 1000)
            }
        })
    })
    </script>
</body>

</html>